import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import ReactDOM  from 'react-dom';
import { withRouter ,NavLink} from 'react-router-dom';
import { Timeline,Tag,Icon,Tools} from 'weaver-mobile';
import { ListViewPage } from 'weaver-mobile-page';
import { Base64 } from 'js-base64';
import { asyncComponent } from 'react-async-component';
import {CommonText} from '../../governTools/comText/text';
import HOCcomponent from '../hocComponent';
const getLabel = Tools.getLabel;
const commonText = new CommonText();
const coms = {
  ActionPage: asyncComponent({
    resolve: () => import('./addPages/actionPage')
  })
}
@inject('opinionStore')
@withRouter
@observer
/*
 * @info: 评论组件
 * @Author: lusx
 * @Date: 2019-12-01 11:13:16
 * @Last modified by:   lusx
 * @Last modified time: 01-04-2019 03:32:58
 */
class OpinionPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showReportButton:true,
      height:0,
      width:0
    };
  }
  componentDidMount() {
    const hei = ReactDOM.findDOMNode(this.lv).scrollHeight,
          wid = ReactDOM.findDOMNode(this.lv).scrollWidth;
    this.setState({
      height:hei,
      width:wid
    })
    const {opinionStore:{initDatas,listViewStore:{current,pageSize}},location} = this.props;
    const id = new URLSearchParams(location.search).get('id');
    const params = {
      'pageindex':current,
      'pagesize':pageSize,
      'taskId':id
    }
    initDatas(params,//19.1.22解决汇报权限
      (v)=>{
        this.setState({
          showReportButton:v
        })
      }
    );
  }
  componentWillUnmount(){
    const {opinionStore:{clearState}} = this.props;
    clearState();
  }
  render() {
    const { opinionStore:{listViewStore,onEndReached,onRefresh}} = this.props;
    let {showReportButton,...size} = this.state;
    return (
      <div className='g-opinionPage' ref={ref => this.lv = ref} style={{height:'100%'}} >
        <ListViewPage.Normal
          store={listViewStore}
          getDataCustom={true}
          getTemplate={this.getTemplate}
          onEndReached={(event) => onEndReached(event)}
          onRefresh={(event) => onRefresh(event)}
          customHeight={'100%'}
        />
        <coms.ActionPage size={size} showReportButton={showReportButton} />
      </div>
    );
  }
  getTemplate = (template) => {
    const newTemp = {
      ...template,
      default: [{
        key: 'col_1',
        render: (data) => {
          return (
            <OpinionItemPage data={data} match={this.props.match} location={this.props.location} history={this.props.history}/>
          );
        },
      }],
    };
    return newTemp;
  }
}

class OpinionItemPage extends Component{
  constructor(props) {
    super(props);
    this.state={
      isaction : false
    }
  }
  render(){
    const {data:{instructType,userName,content,id,instructReplyList,createdate,createtime},location} = this.props;
    const pageId = new URLSearchParams(location.search).get('id');
    return(
      <div key={id} className='g-opinionItemPage'>
        <Timeline.Item>
        <div >
          <Tag className='g-item-instructType'>{instructType === '1' ? "批示" : "反馈" }</Tag>
          <span className='g-item-userName'>{userName}</span>
          <div className='g-item-content ql-editor' dangerouslySetInnerHTML={{ __html: Base64.decode(content) }} ></div>
          <div className='g-item-time'>{createdate}&nbsp;{createtime}</div>
          <div onClick={this.linkHandle.bind(this)} className={this.state.isaction ? 'g-opinion-comment-isaction': ''}>
            {/* <NavLink
              to={{
                pathname: `${match.url}/opinionChild`,
                search: `?id=${pageId}&instructTopid=${id}&instructType=${instructType}`
                }}
                exact={true}
              activeClassName="active" >
              <div className='g-opinion-comment'><Icon type="reply" size='xxs' color='#888'/><span className='g-comment-number'>{instructReplyList.length}</span></div>
            </NavLink> */}
            <div className='g-opinion-comment'><Icon type="reply" size='xxs' color='#888'/><span className='g-comment-number'>{instructReplyList.length}</span></div>
          </div>
        </div>
        </Timeline.Item>
      </div>
    )
  }
  linkHandle(e){
    if(e) {e.preventDefault(); e.stopPropagation();}
    this.setState({isaction: true})
    let timeoutflag = null;
    const {history: { push },match,location,data:{id,instructType}} = this.props;
    const pageId = new URLSearchParams(location.search).get('id');
    if(timeoutflag != null){
      clearTimeout(timeoutflag);
      timeoutflag = null;
    }else{
      timeoutflag=setTimeout(function(){
        push(`${match.url}/opinionChild?id=${pageId}&instructTopid=${id}&instructType=${instructType}`);
      },500);
    }
  }
}

export default HOCcomponent(OpinionPage);
